<template>
    <app-layout title="评价师傅">
        <view class="order-id">
            <text class="title">订单编号：</text>
            <text class="value">{{ orderId }}</text>
        </view>
        <view class="grade">
            <text class="title">综合评分：</text>
            <uni-rate v-model="grade" :allowHalf="false" :size="utils.rpx2px(45)" />
        </view>
        <view class="content">
            <textarea
                class="textarea"
                v-model="content"
                maxlength="300"
                placeholder="输入描述您对师傅服务的感受"
                placeholder-class="placeholder-style-3"
            />
            <view class="tags-group">
                <view
                    class="tags-item"
                    v-for="(item, index) in tags"
                    :key="index"
                    @click="chooseTag(item)"
                    :class="{ active: chooseTags.includes(item) }"
                >
                    <text>{{ item }}</text>
                </view>
            </view>
        </view>
        <view class="images">
            <view class="common-form-container">
                <view class="upload-item">
                    <block v-for="(item, index) in images" :key="index">
                        <view class="image-box">
                            <image class="image" :src="item" mode="aspectFill" />
                        </view>
                    </block>
                    <view class="image-box upload" @click="chooseImage">
                        <text class="iconfont icon-shangchuantupian"></text>
                        <text class="text">上传图片</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">提交</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import UniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
export default {
    name: "worker-appraise",
    data() {
        return {
            utils: this.$utils,
            tags: ["技术专业", "礼貌热情", "认真负责", "快速完工", "按时上门"],
            listType: "",
            id: 0,
            orderId: "",
            grade: 0,
            content: "",
            chooseTags: [],
            images: [],

            state: false,
        };
    },
    components: {
        AppLayout,
        UniRate,
    },
    onLoad(e) {
        if (!e.id || !e.orderId || !e.list) {
            return this.$utils.toast("参数错误").then(() => {
                this.$utils.toPage("", "", "back");
            });
        }
        this.id = e.id;
        this.orderId = e.orderId;
        this.listType = e.list;
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        chooseTag(tag) {
            if (!this.chooseTags.includes(tag)) {
                this.chooseTags.push(tag);
            } else {
                this.chooseTags = this.chooseTags.filter((item) => item != tag);
            }
        },
        chooseImage() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.images.push(response.img);
                    });
                });
            });
        },
        submit() {
            this.$models.order
                .appraiseOrder({
                    request: {
                        api: "order.appraise." + this.listType,
                        data: {
                            id: this.id,
                            desc: this.content,
                            msg: this.chooseTags.join(),
                            img: this.images,
                            score: this.grade,
                        },
                    },
                })
                .then((message) => {
                    this.$utils.toast(message).then(() => {
                        this.$utils.toPage("", "", "back");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.order-id,
.content,
.grade,
.images {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    .title {
        font-size: 28rpx;
        color: #999999;
    }
}
.order-id {
    padding: 22rpx 40rpx;
    margin-bottom: 18rpx;
    .value {
        font-size: 28rpx;
        color: #000000;
    }
}
.grade {
    padding: 80rpx 40rpx;
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
}
.content {
    width: 100%;
    padding: 40rpx;
    margin-bottom: 18rpx;
    .textarea {
        width: 100%;
        height: 170rpx;
        font-size: 26rpx;
        color: #000000;
    }
    .tags-group {
        width: 100%;
    }
    .tags-item {
        display: inline-block;
        padding: 10rpx 20rpx;
        background-color: #ffffff;
        border: 2rpx solid #999999;
        border-radius: 22rpx;
        font-size: 26rpx;
        color: #999999;
        line-height: 26rpx;
        margin-right: 24rpx;
        margin-top: 24rpx;
    }
    .tags-item:nth-child(4n) {
        margin-right: 0;
    }
    .tags-item.active {
        color: #8b9aeb;
        background-color: #e4e8fa;
        border: 2rpx solid #8b9aeb;
    }
}
.images {
    padding: 35rpx 40rpx;
    .common-form-container {
        margin-top: 0;
        .upload-item {
            padding: 0;
        }
    }
}
</style>